<template>
  <div class="page-box flex-col">
    <div class="page-bg" />

    <div class="page-container flex-col">
      <div class="search flex-col">
        <div class="group3 flex-row">
          <u-icon
            name="/static/images/filter.png"
            color="#2979ff"
            size="28"
            @click="onOpenSearch"
          ></u-icon>
          <span class="word1" @click="onOpenSearch" style="margin-right: 20rpx;color:#ffbf10;"
            >分类</span
          >
          <div class="mod2 flex-col">
            <div class="block1 flex-row">
              <img
                class="icon3"
                referrerpolicy="no-referrer"
                src="../../static/images/search.png"
              />
              <input
                v-model="queryParams.model"
                class="txt2"
                type="text"
                placeholder="输入产品型号"
              />
            </div>
          </div>
          <span class="word1" @click="reflash">搜索</span>
        </div>
      </div>
      <div v-if="list.length > 0">
        <u-tabs
          v-if="list.length > 0"
          :list="list"
          :is-scroll="true"
          :current="current"
          @change="change"
          bg-color="transparent"
          active-color="#FFBF10"
          inactive-color="#fff"
          style="width: 100%"
        ></u-tabs>
      </div>
      <scroll-view
        class="scroll-box"
        scroll-y="true"
        @scrolltolower="onScrollBottom"
      >
        <div class="product-box">
          <div
            class="product-item x-f"
            v-for="item in productList"
            :key="item.id"
            @click.stop="onOpeInfo(item)"
          >
            <image
              mode="aspectFit"
              class="product-item-pic"
              referrerpolicy="no-referrer"
              :src="formateUrl(item.poster)"
            />
            <div class="product-item-hr"></div>

            <div class="product-item-info flex-1">
              <div class="product-item-name hide-1row">
                {{ item.model }}
              </div>
              <div class="product-item-feature hide-1row">
                {{ item.feature[0] ? "◆" + item.feature[0] : "" }}
              </div>
              <div
                class="product-item-feature hide-1row"
                style="margin-bottom: 20rpx"
              >
                {{ item.feature[1] ? "◆" + item.feature[1] : "" }}
              </div>
              <div class="product-item-btns">
                <div
                  style="width: 112rpx"
                  class="product-item-btn"
                  @click.stop="onOpenVideo(item)"
                >
                  视频
                </div>
                <span
                  style="width: 188rpx"
                  class="product-item-btn"
                  @click.stop="onOpenViews(item)"
                  >彩页&amp;说明书</span
                >
              </div>
            </div>
            <img
              class="product-item-right"
              src="../../static/images/right.png"
              @click.stop="onOpeInfo(item)"
            />

            <!-- <span class="txt4">更多详情</span> -->

            <!-- <div class="layer7 flex-row">
              <div class="mod3 flex-col"></div>
              <div class="mod4 flex-col">
                <span class="txt2">{{ item.name }} {{ item.model }}</span>
                <span class="info4">{{ item.feature }}</span>
              </div>
            </div>
            <div class="layer8 flex-row">
              <div class="section3 flex-col" @click="onOpenVideo(item)">
                <span class="txt3">视频</span>
              </div>
              <div class="section4 flex-col" @click="onOpenViews(item)">
                <span class="word6">彩页&amp;说明书</span>
              </div>
              <div class="section5 flex-col" @click="onOpeInfo(item)">
                <span class="txt4">更多详情</span>
              </div>
            </div> -->
          </div>
        </div>

        <div v-if="loading" class="x-f" style="margin-top: 10px">
          <u-loading mode="circle"></u-loading>
          <div style="margin-left: 10px">加载中..</div>
        </div>
        <u-empty
          v-if="!loading && productList.length <= 0"
          text="暂无数据"
          mode="list"
        ></u-empty>
        <u-picker
          v-model="show"
          mode="selector"
          :default-selector="[0]"
          :range="documentList"
          range-key="fileName"
          @confirm="onFileConfirm"
        ></u-picker>
        <!-- 筛选 -->
        <u-popup
          class="search-pop"
          v-model="showFilter"
          mode="bottom"
          border-radius="36"
          height="74%"
          closeable
        >
          <view class="search-content">
            <view class="search-title">分类</view>
            <scroll-view class="search-categorys" scroll-y="true">
              <view class="search-category">
                <view class="search-category-title">一级分类</view>
                <view class="search-category-box">
                  <view
                    @click="selectCategory(item, 1, index)"
                    class="search-category-item"
                    :class="{
                      active: p1 == item.id,
                      more: item.name2,
                    }"
                    v-for="(item, index) in list"
                    :key="item.id"
                    ><view class="inner">{{ item.name1 }}</view>
                    <view class="inner">{{ item.name2 }}</view></view
                  >
                </view>
              </view>
              <view v-if="level2List.length > 0" class="search-category">
                <view class="search-category-title">二级分类</view>
                <view class="search-category-box">
                  <view
                    @click="selectCategory(item, 2)"
                    class="search-category-item"
                    :class="{
                      active: p2 == item.id,
                      more: item.name2,
                    }"
                    v-for="item in level2List"
                    :key="item.id"
                    ><view class="inner">{{ item.name1 }}</view>
                    <view class="inner">{{ item.name2 }}</view></view
                  >
                </view>
              </view>
              <view v-if="level3List.length > 0" class="search-category">
                <view class="search-category-title">三级分类</view>
                <view class="search-category-box">
                  <view
                    @click="selectCategory(item, 3)"
                    class="search-category-item"
                    :class="{
                      active: p3 == item.id,
                      more: item.name2,
                    }"
                    v-for="item in level3List"
                    :key="item.id"
                    ><view class="inner">{{ item.name1 }}</view>
                    <view class="inner">{{ item.name2 }}</view></view
                  >
                </view>
              </view>
            </scroll-view>
            <view class="search-btns">
              <view class="search-btns-reset" @click="onReset">重置</view>
              <view class="search-btns-completed" @click="onSearch">完成</view>
            </view>
          </view>
        </u-popup>
        <div class="zixun flex-col" @click="gotoZixun">
          <div class="main5 flex-col">
            <div class="box3 flex-col">
              <img
                class="pic3"
                referrerpolicy="no-referrer"
                src="../../static/images/kefu.png"
              />
              <span class="word13">咨询</span>
            </div>
          </div>
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import {
  getCategoryList,
  getProductList,
  getProductInfo,
  getDownLoad,
} from "@/api";
import { handleTree, isHttp, isIOS } from "@/utils/tools";

export default {
  data() {
    return {
      list: [],
      current: 0,
      productList: [],
      queryParams: {
        pageSize: 20,
        pageNum: 1,
        categoryPath: "",
        model: "",
      },
      isEnd: false,
      documentList: [],
      show: false,
      loading: false,
      showFilter: false,
      p1: "",
      p2: "",
      p3: "",
    };
  },
  mounted() {
    getCategoryList({ status: 0 }).then((res) => {
      res.data.forEach((x) => {
        x.name1 = x.name.slice(0, 6);
        x.name2 = x.name.slice(6);
      });
      const list = handleTree(res.data, "id", "pid", "children");
      if (this.$route.query.id) {
        const index = list.findIndex((item) => item.id == this.$route.query.id);
        if (index != -1) {
          this.current = index;
          this.queryParams.categoryPath = list[index].id;
        } else {
          this.queryParams.categoryPath = list[0].id;
        }
      } else {
        this.queryParams.categoryPath = list[0].id;
      }
      this.list = list;
      this.getProductList();
    });
  },
  computed: {
    level2List() {
      try {
        return this.list.find((x) => x.id == this.p1).children || [];
      } catch (e) {
        return [];
      }
    },
    level3List() {
      try {
        return this.level2List.find((x) => x.id == this.p2).children || [];
      } catch (e) {
        return [];
      }
    },
  },
  methods: {
    getGwFileList(productId) {
      return getDownLoad(productId)
        .then((res) => {})
        .catch((res) => {
          let list = [];
          if (res.code == 0) {
            if (
              res.data.productInfo.downloadFileList &&
              res.data.productInfo.downloadFileList.length > 0
            ) {
              res.data.productInfo.downloadFileList.forEach((x) => {
                if (
                  x.downloadFileContentList &&
                  x.downloadFileContentList.length > 0
                ) {
                  x.downloadFileContentList.forEach((y) => {
                    list.push({
                      fileName: y.fileName,
                      fileUrl: y.fileUrl,
                    });
                  });
                }
              });
            }
          }
          return list;
        });
    },
    formateUrl(url) {
      if (!isHttp(url)) {
        return this.$host + url;
      }
      return url;
    },
    getByteLength(str) {
      return str.replace(/[^\x00-\xff]/g, "aa").length;
    },
    onOpenSearch() {
      this.p1 = this.queryParams.categoryPath;
      this.showFilter = true;
    },
    onSearch() {
      this.current = this.list.findIndex((x) => x.id == this.p1);
      this.queryParams.categoryPath = this.p1;
      this.reflash();
      this.showFilter = false;
    },
    onReset() {
      this.p1 = this.queryParams.categoryPath;
      this.p2 = "";
      this.p3 = "";
    },
    selectCategory(item, level, index) {
      if (level == 1) {
        this.p1 = item.id;
        this.p2 = "";
        this.p3 = "";
      } else if (level == 2) {
        this.p2 = this.p2 == item.id ? "" : item.id;
        this.p3 = "";
      } else if (level == 3) {
        this.p3 = this.p3 == item.id ? "" : item.id;
      }
    },
    reflash() {
      this.productList = [];
      this.queryParams.pageNum = 1;
      this.getProductList();
    },
    getProductList() {
      this.loading = true;
      getProductList({
        ...this.queryParams,
        categoryPath: this.p3 || this.p2 || this.queryParams.categoryPath,
      }).then((res) => {
        res.rows.forEach((x) => {
          x.feature = x.feature.split("◆").filter((x) => !!x);
        });
        this.productList = [...this.productList, ...res.rows];
        this.loading = false;
        this.isEnd = res.rows.length < this.queryParams.pageSize;
      });
    },
    change(index) {
      this.current = index;
      this.p3 = "";
      this.p2 = "";
      this.queryParams.categoryPath = this.list[index].id;
      this.reflash();
    },
    onOpenVideo(item) {
      if (!item.videoUrl) {
        uni.showToast({
          title: "暂无视频",
          icon: "none",
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/product/video?url=" + this.$host + item.videoUrl,
      });
    },
    onOpeInfo(item) {
      if (item.url) {
        window.location.href = item.url;
      }
      // uni.navigateTo({
      //   url: "/pages/webview/index?url=" + item.url,
      // });
    },
    onOpenPreview(item, type) {
      // item.fileName || item.fileUrl;

      const url = isHttp(item.fileUrl)
        ? item.fileUrl
        : this.$host + item.fileUrl;

      if (isIOS()) {
        window.location.href = url;
        return;
      }

      if (/\.pdf/.test(item.fileUrl)) {
        uni.navigateTo({
          url: "/pages/product/pdf?url=" + url,
        });
      } else {
        uni.navigateTo({
          url: "/pages/webview/index?type=1&url=" + url,
        });
      }

      console.log(item);
      // if (type == 1) {

      // } else if (type == 2) {

      // }
    },
    onOpenViews(item) {
      this.documentList = [];
      if (item.url) {
        try {
          const pid = item.url.split("product_id=")[1].split("&")[0];
          console.log(pid);
          this.getGwFileList(pid).then((list) => {
            this.documentList.push(...list);
          });
        } catch (error) {
          console.log(error);
        }
      }
      getProductInfo(item.id).then((res) => {
        this.documentList.push(...res.data.wxSysAttachmentList);
        this.show = true;
      });
    },
    onScrollBottom() {
      console.log("onScrollBottom");
      if (this.isEnd) return;
      this.queryParams.pageNum++;
      this.getProductList();
    },
    onFileConfirm(index) {
      const item = this.documentList[index];
      this.onOpenPreview(item, item.type);
    },
    gotoZixun() {
      uni.navigateTo({
        url: "/pages/support/preSales",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .search-pop {
  .u-drawer-content {
    background: #21212d;
    // border: 0.5rpx solid #ffffff;
  }
  .search-content {
    padding: 40rpx 32rpx;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .search-title {
    font-size: 34rpx;
    font-weight: 500;
    color: #ffffff;
    padding-bottom: 20rpx;
  }
  .search-categorys {
    flex: 1;
    height: calc(100% - 120rpx - 64rpx);
    // overflow-y: auto;
  }
  .search-category {
  }
  .search-category-title {
    font-size: 28rpx;
    color: #63636b;
    margin: 24rpx 0;
  }
  .search-category-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    // justify-content: space-around;
  }
  .search-category-item {
    width: 212rpx;
    height: 80rpx;
    background: #14141f;
    border-radius: 8rpx;
    text-align: center;
    line-height: 80rpx;
    margin: 0 8rpx 24rpx;
    word-break: break-all;
    box-sizing: border-box;
    padding: 0 20rpx;
    font-size: 24rpx;
    .inner {
      max-width: 100%;
      margin: 0 auto;
      white-space: nowrap;
    }
    &.more {
      line-height: 32rpx;
      padding-top: 6rpx;
      padding-bottom: 6rpx;
    }
    &.active {
      background: #ffbf10;
      color: #333333;
    }
  }
  .search-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
  }
  .search-btns-reset {
    width: 308rpx;
    height: 96rpx;
    background: #33333f;
    border-radius: 8rpx;
    line-height: 96rpx;
    text-align: center;
  }
  .search-btns-completed {
    width: 308rpx;
    height: 96rpx;
    border-radius: 8rpx;
    background: #ffbf10;
    line-height: 96rpx;
    text-align: center;
  }
}

.scroll-box {
  height: calc(100% - 170rpx) !important;
}
.product-box {
  .product-item:last-of-type {
    padding-bottom: 100rpx;
    border: 0;
  }
}
.product-item {
  overflow: hidden;
  padding: 56rpx 0;
  margin: 0 32rpx;
  border-bottom: 1rpx solid #545454;
  .product-item-pic {
    width: 240rpx;
    height: 216rpx;
    margin-right: 16rpx;
    background-color: #fff;
  }
  .product-item-hr {
    width: 4rpx;
    height: 216rpx;
    background: #ffbf10;
    margin-right: 16rpx;
  }
  .product-item-info {
    margin-right: 20rpx;
    overflow: hidden;
  }
  .product-item-name {
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
  }
  .product-item-feature {
    font-size: 28rpx;
    font-weight: 400;
    color: #d0d0d0;
    margin: 10rpx 0 10rpx;
    min-height: 1em;
    white-space: nowrap;
  }
  .product-item-btns {
    display: flex;
    align-items: center;
  }
  .product-item-btn {
    height: 54rpx;
    background: #545454;
    border-radius: 4rpx;
    color: #ffffff;
    text-align: center;
    line-height: 54rpx;
    // padding: 0 20rpx;
    font-size: 24rpx;
    margin-right: 20rpx;
  }
  .product-item-right {
    width: 32rpx;
    height: 32rpx;
  }
  .layer7 {
    z-index: auto;
    justify-content: space-between;
    margin: 32rpx 0 0 32rpx;
    .mod3 {
      z-index: 8;
      position: relative;
      width: 212rpx;
      height: 160rpx;
      overflow: hidden;
      margin-right: 20rpx;
      // background: url(./img/SketchPngd07075a29928e21c7b1f9ddc29282e6d3b006e13399a5ce27d9e3de3daeb8ad6.png)
      // 100% no-repeat;
      .pic1 {
        z-index: 9;
        position: absolute;
        left: 0;
        top: 0;
        width: 212rpx;
        height: 160rpx;
      }
    }
    .mod4 {
      z-index: auto;
      margin-top: 8rpx;
      flex: 1;
      .txt2 {
        z-index: 10;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 32rpx;
        letter-spacing: 0.34736838936805725rpx;
        font-family: PingFangSC-Medium;
        line-height: 45rpx;
        text-align: left;
      }
      .info4 {
        z-index: 11;
        display: block;
        overflow-wrap: break-word;
        color: rgba(208, 208, 208, 1);
        font-size: 28rpx;
        letter-spacing: 0.3039473593235016rpx;
        line-height: 40rpx;
        text-align: left;
        align-self: flex-start;
        margin-top: 8rpx;
      }
    }
  }
  .layer8 {
    z-index: auto;
    width: 686rpx;
    height: 58rpx;
    margin: 24rpx 0 0 32rpx;
    .section3 {
      z-index: 15;
      height: 58rpx;
      border-radius: 4rpx;
      background-color: rgba(84, 84, 84, 1);
      width: 170rpx;
      justify-content: center;
      align-items: center;
      .txt3 {
        z-index: 16;
        width: 57rpx;
        height: 40rpx;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 28rpx;
        letter-spacing: 0.3039473593235016rpx;
        white-space: nowrap;
        line-height: 40rpx;
        text-align: center;
      }
    }
    .section4 {
      z-index: 18;
      height: 58rpx;
      border-radius: 4rpx;
      background-color: rgba(84, 84, 84, 1);
      margin-left: 24rpx;
      width: 200rpx;
      justify-content: center;
      align-items: center;
      .word6 {
        z-index: 19;
        width: 163rpx;
        height: 40rpx;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 28rpx;
        letter-spacing: 0.3039473593235016rpx;
        white-space: nowrap;
        line-height: 40rpx;
        text-align: center;
      }
    }
    .section5 {
      z-index: 21;
      height: 58rpx;
      border-radius: 4rpx;
      background-color: rgba(255, 191, 16, 1);
      margin-left: 122rpx;
      width: 170rpx;
      justify-content: center;
      align-items: center;
      .txt4 {
        z-index: 22;
        width: 114rpx;
        height: 40rpx;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 28rpx;
        letter-spacing: 0.3039473593235016rpx;
        white-space: nowrap;
        line-height: 40rpx;
        text-align: center;
      }
    }
  }
}

.search {
  z-index: 94;
  height: 88rpx;
  // background-color: rgba(28, 28, 30, 0);
  width: 750rpx;
  justify-content: center;
  align-items: center;
  .group3 {
    z-index: auto;
    width: 686rpx;
    height: 66rpx;
    justify-content: space-between;
    .mod2 {
      z-index: 96;
      height: 66rpx;
      border-radius: 33rpx;
      background-color: #545454;
      width: 616rpx;
      justify-content: center;
      align-items: flex-start;
      padding-left: 22rpx;
      .block1 {
        z-index: auto;
        width: 100%;
        height: 40rpx;
        // justify-content: space-between;
        .icon3 {
          z-index: 97;
          width: 40rpx;
          height: 40rpx;
        }
        .txt2 {
          z-index: 104;
          flex: 1;
          // width: 255rpx;
          height: 40rpx;
          display: block;
          overflow-wrap: break-word;
          color: rgba(208, 208, 208, 1);
          font-size: 28rpx;
          letter-spacing: 0.3039473593235016rpx;
          white-space: nowrap;
          line-height: 40rpx;
          text-align: left;
        }
      }
    }
    .word1 {
      z-index: 105;
      width: 57rpx;
      height: 40rpx;
      display: block;
      overflow-wrap: break-word;
      color: rgba(208, 208, 208, 1);
      font-size: 24rpx;
      letter-spacing: 0.3039473593235016rpx;
      white-space: nowrap;
      line-height: 40rpx;
      text-align: right;
      margin-top: 13rpx;
      margin-left: 8rpx;
    }
  }
}

.zixun {
  z-index: 101;
  height: 144rpx;
  border: 1rpx solid rgba(151, 151, 151, 0);
  width: 144rpx;
  justify-content: center;
  align-items: center;
  margin: 21rpx 0 0 99rpx;
  position: fixed;
  bottom: 100px;
  right: 30px;
  .main5 {
    z-index: 103;
    height: 120rpx;
    box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(255, 174, 90, 0.1);
    border-radius: 50%;
    width: 120rpx;
    justify-content: center;
    align-items: center;
    background-color: #a57e16;

    .box3 {
      z-index: auto;
      width: 64rpx;
      height: 100rpx;
      .pic3 {
        z-index: 104;
        width: 64rpx;
        height: 64rpx;
      }
      .word13 {
        z-index: 113;
        width: 49rpx;
        height: 33rpx;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 24rpx;
        letter-spacing: 0.26052629947662354rpx;
        white-space: nowrap;
        line-height: 33rpx;
        text-align: center;
        align-self: center;
        margin-top: 3rpx;
      }
    }
  }
}
</style>
